<template>
  <div class="shoplist_container">
    <ul v-if="shopListArr.length !=0">
        <router-link :to="{path:'shopDetail', qurey:{geohash,id: item.id}}" class="shop_li" v-for='item in shopListArr' :key='item.id'>
            <div class="shop_l">
                <img :src="imgBaseUrl + item.image_path" alt="商家图">
            </div>
            <div class="shop_r">
                <div class="shop_title">
                    <h4 class="ellipsis" :class="item.is_premium? 'premium ':''">{{item.name}}</h4>
                    <ul>
                        <li v-for='item in item.supports' :key='item.id'>{{item.icon_name}}</li>
                    </ul>
                </div>
                <p>
                    <span class="gray">
                        <em class="yellow">评分:{{item.rating}}</em>月售{{item.recent_order_num}}单
                    </span>
                    <span class="times">
                        <i v-if="item.delivery_mode">{{item.delivery_mode.text}}</i>
                        <i class="blue" v-if="timesStatus(item.supports)">准时达</i>
                    </span>
                </p>
                <p>
                    <span>￥{{item.float_minimum_order_amount}}起送/{{item.piecewise_agent_fee.tips}}</span>
                    <span>{{item.distance}}/<i class="blue">{{item.order_lead_time}}</i></span>
                </p>
            </div>
        </router-link>
    </ul>
    <ul v-else>
      <li>
        <div class="no_data">{{data_message}}</div>
      </li>
    </ul>
    
  </div>
</template>

<script>
import { mapState } from 'vuex'
import {shopList} from '../../api/api'
export default {
  name:'shopList',
  data () {
    return {
      imgBaseUrl:'http://cangdu.org:8001/img/',
      offset:0,    //初使值
      shopListArr:[],   //商家列表
      data_message:'加载中...'
    }
  },

  mounted(){
    this.initData();
  },

  props:['geohash'],

  computed:{
    ...mapState([
      'latitude','longitude'
    ])
  },

  methods:{
    async initData(){
      await await shopList(this.latitude, this.longitude, this.offset).then((res)=>{
        if(res.data.length == 0){
          this.data_message = '暂无数据...'
        }else{
          this.shopListArr = [...(res.data)]
        }
        
      })
    },
    timesStatus(supports){
      let zhunshiStatus;
      if((supports instanceof Array) && supports.length){
        supports.forEach((item)=>{
          if(item.icon_name === '准'){
            zhunshiStatus =true
          }
        })
      }else{
        zhunshiStatus =true
      }
      return zhunshiStatus
    }
  }
}
</script>

<style scoped lang="scss">
  @import 'src/style/mixin';
  em,i{font-style:normal;}
  .gray{color:#666;}
  .yellow{color:#ff6000;margin-right:5px;}
  .blue{color:#3190e8;}
  .shoplist_container{
    .shop_li{
        padding:.313rem;
        display: flex;
        border-bottom:1px solid #ccc;
        .shop_l img{
            @include wh(2.7rem, 2.7rem);
            margin-right:.313rem;
        }
        .shop_r{
          flex:auto;
            .shop_title{
                display:flex;;
                justify-content: space-between;
                h4{
                  width:10rem;
                  font-size:0.75rem;
                }
                .premium::before{
                  content:'品牌';
                  display:inline-block;
                  font-size: 0.5rem;
                  line-height: .6rem;
                  color: #333;
                  background-color: #ffd930;
                  padding: 0 0.1rem;
                  border-radius: 0.1rem;
                  margin-right: 0.2rem;
                }
                ul li{
                    display: inline-block;
                    @include sc(0.5rem, #ccc);
                    padding-left:5px;
                }
            }
            p{
                display: flex;
                justify-content: space-between;
                font-size:.5rem;
                margin-top:.313rem;
                .times{
                    i:not(.blue){
                        padding:1px;
                        background-color: #3190e8;
                        border:1px solid #3190e8;
                        color:#fff;
                        border-radius: 5px;
                    }
                    i.blue{
                        padding:1px;
                        color:#3190e8;
                        border:1px solid;
                        border-radius: 5px;
                    }
                }
            }
        }
    }
    .no_data{
      padding: 3rem;
      font-size: .75rem;
    }
  }
</style>
